<template>
  <zm-view ref="view">
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="item in list" :key="item.id" class="flex flex-col relative bg-white radius-16 px-24 py-20 mx-20 mt-20 overflow-hidden">
        <view class="flex items-center justify-between">
          <text class="font-30 font-bold">{{ item.vipCardName }}</text>
          <text class="font-32 font-bold text-price-small-before">{{ parseFloat(item.money) }}</text>
        </view>
        <view class="text-666 font-500 mt-10">有效期：{{ item.oldEndTime | formatDate | formatDate("YYYY.MM.DD") }}-{{ item.newEndTime | formatDate | formatDate("YYYY.MM.DD") }}</view>
        <view class="text-666 font-500 mt-10">订单号：{{ item.orderNo }}</view>
        <view class="badge-wrap">
          <status-badge :type="badge(item, 'type')" :text-color="badge(item, 'color')">{{ badge(item, "text") }}</status-badge>
        </view>
      </view>
    </zm-list>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      list: [],
      options: { emptyText: "暂无记录" }
    }
  },
  computed: {
    badge() {
      return (item, key) => {
        const status = {
          0: { type: 1, color: "#FD7441", text: "待生效" },
          1: { type: 2, color: "#08C5AF", text: "生效中" },
          2: { type: 3, color: "#999999", text: "已到期" },
          3: { type: 3, color: "#999999", text: "已退款" }
        }
        return status[item.status][key]
      }
    }
  },
  onLoad() {},
  methods: {
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.vipCardV2.getOpenCardLog({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.badge-wrap {
  top: 25rpx;
  right: 60rpx;
  position: absolute;
}
</style>
